<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { ref } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter();
//#region 测试用的模块数据 真实数据应来自服务端
interface IModule {
  /**
   * 模块/页面 名称
   */
  title: string,
  /**
   * 图标
   */
  icon: string,
  /**
   * ID
   */
  id: number,
  /**
   * 子级
   */
  children?: IModuleChildren[],
  /**
   * 所需权限
   */
  rules: any[]
}

interface IModuleChildren extends IModule {
  path: string
}

const modules = ref<IModule[]>([
  {
    id: 1,
    title: "仪表盘",
    icon: "",
    rules: [],
    children: [
      {
        id: 1001,
        title: "仪表盘",
        icon: "",
        rules: [],
        path: "/"
      }
    ]
  },
  {
    id: 2,
    title: "商品管理",
    icon: "",
    rules: [],
    children: [
      {
        id: 2001,
        title: "商品列表",
        icon: "",
        rules: [],
        path: "/goods"
      },
      {
        id: 2002,
        title: "新增商品",
        icon: "",
        rules: [],
        path: "/goods/add"
      },
      {
        id: 2003,
        title: "商品分类",
        icon: "",
        rules: [],
        path: "/goods/classification-list"
      },
      {
        id: 2004,
        title: "新增分类",
        icon: "",
        rules: [],
        path: "/goods/classification-save"
      }
    ]
  },
  {
    id: 3,
    title: "订单管理",
    icon: "",
    rules: [],
    children: [
      {
        id: 3001,
        title: "订单列表",
        icon: "",
        rules: [],
        path: "/order"
      }
    ]
  },
]);
//#endregion

const navSelectedKeys = ref<number[]>([1]);
const menuSelectedKeys = ref<number[]>([]);
// 菜单信息
const menuObject = ref<IModule>(modules.value[0]);

// 导航菜单变化
const onNavMenuSelect = (item: any) => {
  const find = modules.value.find(x => x.id == item.key);
  if (find) {
    menuObject.value = find;
    if (find.children && find.children.length) {
      const first = find.children[0];
      menuSelectedKeys.value = [first.id];
      router.push(first.path);
    }
  }
}
</script>

<template>
  <a-config-provider :locale="zhCN">
    <!-- 认证部分页面 -->
    <template v-if="$route.meta.hideLayout">
      <RouterView />
    </template>
    <!-- 其他页面 -->
    <template v-else>
      <a-layout class="layout">
        <a-layout-header class="header">
          <div class="logo" style="color: #fff;">
            <RouterLink to="/" replace>
              <img :src="$config.IMAGE_DIR + '/logo.png'">
            </RouterLink>
          </div>
          <!-- 头部导航区域 -->
          <a-menu v-model:selectedKeys="navSelectedKeys" @select="onNavMenuSelect" theme="dark" mode="horizontal">
            <a-menu-item v-for="item in modules" :key="item.id">
              {{ item.title }}
            </a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout>
          <!-- 左侧菜单 -->
          <a-layout-sider class="layout-sider">
            <a-menu v-model:selectedKeys="menuSelectedKeys" :openKeys="menuSelectedKeys" theme="dark" mode="inline">
              <a-menu-item :key="menu.id" v-for="menu in menuObject.children || []" @click="$router.push(menu.path)">
                {{ menu.title }}
              </a-menu-item>
            </a-menu>
          </a-layout-sider>
          <a-layout style="padding: 0 24px 24px">
            <!-- 面包屑导航 -->
            <a-breadcrumb class="breadcrumb">
              <template v-for="(item, itemIndex) in $route.matched.filter(x => x.meta.title)">
                <template v-if="item.meta.title">
                  <a-breadcrumb-item>
                    {{ item.meta.title }}
                  </a-breadcrumb-item>
                </template>
              </template>
            </a-breadcrumb>
            <!-- 主体内容 -->
            <a-layout-content class="layout-content">
              <RouterView v-slot="{ Component }">
                <Transition>
                  <KeepAlive>
                    <component :is="Component" />
                  </KeepAlive>
                </Transition>
              </RouterView>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-layout>
    </template>
  </a-config-provider>
</template>

<style scoped lang="less">
.layout {
  min-height: 100vh;

  .header {
    padding: 0;
    display: flex;

    > .ant-menu {
      flex: 1;
    }
  }
}

.layout-content {
  padding: 0 24px 0 0;
  margin: 0;
  height: calc(100vh - 64px - 24px - 40px);
  overflow-y: auto;
  overflow-x: hidden;
}

.layout-sider {
  :deep(.ant-menu-item) {
    margin-top: 0;
  }
}



.breadcrumb {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.logo {
  width: 200px;
  height: 100%;

  a {
    line-height: initial;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  img {
    width: 130px;
    margin-top: 5px;
  }
}
</style>
